<template>
  <div class="admin-app">
    <el-container>
      <el-header>
        <el-button type="primary" @click="toggleDark">切换暗黑模式</el-button>
        <button @click="tuichu" class="but">退出</button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu
              :default-openeds="['1']"
              class="el-menu-vertical-demo"
              :class="{ 'elmenu-dark': isDark }"
              default-active="2"
              router
            >
              <template v-for="item in routeList">
                <template v-if="!item.children">
                  <el-menu-item :index="item.path" :key="item.name">
                    <el-icon><setting /></el-icon>
                    <template #title>{{ item!.meta?.title || item.name }}</template>
                  </el-menu-item>
                </template>

                <template v-else>
                  <el-sub-menu :index="item.path" :key="item.name">
                    <template #title>
                      <el-icon><setting /></el-icon>
                      {{ item!.meta?.title || item.name }}
                    </template>

                    <el-menu-item
                      :index="item.path + '/' + sonItem.path"
                      v-for="sonItem in item.children"
                      :key="sonItem.name"
                    >
                      {{ sonItem!.meta?.title || sonItem.name }}
                    </el-menu-item>
                  </el-sub-menu>
                </template>
              </template>
            </el-menu>
          </el-scrollbar>
        </el-aside>
        <el-container>
          <el-main>
            <el-scrollbar>
              <RouterView />
            </el-scrollbar>
          </el-main>
          <el-footer :class="{ 'el-footer-dark': isDark }">
            <p>@copy by 富豪班 ©️2025</p>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { routesList } from '@/router/index'
import { ref } from 'vue'
import { Document, Menu as IconMenu, Location, Setting, User } from '@element-plus/icons-vue'
import { useDark } from '@vueuse/core'
import { useRouter } from 'vue-router';

const routeList = ref<any>(routesList)

const isDark = useDark()

const toggleDark = () => {
  isDark.value = !isDark.value
}

const router=useRouter()
const tuichu = () => {
  const token=localStorage.getItem('token')
  if (token) {
    localStorage.removeItem('token')

  }
  router.push('/login')
}

</script>

<style lang="scss" scoped>
button{
  background-color: #d081f1;
}
.but{
  width: 100px;
  padding: 6px;
  margin-left: 1260px;
}

.admin-app {
  height: 100%;
  width: 100%;
}

.el-container {
  height: 100%;
}
.el-header {
  align-content: center;
  // background-color: rgba(34, 147, 162, 0.186);
  padding: 0 10px;
}

.el-aside {
  // background-color: rgb(176, 220, 127);
}

.el-main {
  // background-color: rgb(111, 145, 179);
  padding: 10px;
  height: calc(100vh - 120px);
}
.el-footer {
  // background-color: rgb(172, 102, 183);
  padding: 0 10px;
  // color: #fff;
  display: grid;
  place-items: center;
}



.el-scrollbar {
  height: calc(100vh - 60px);
}


</style>
